<style scoped></style>

<template>
    <div>
        <Modal
            title="添加二手房"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="800"
        >
            <Form ref="secondHandForm" label-position="top" :rules="secondHandRole" :model="secondHand">
                <Card>
                    <p slot="title">基本信息</p>
                    <Row :gutter="16">
                        <Col span="16">
                            <FormItem label="标题" prop="title">
                                <Input
                                    v-model="secondHand.title"
                                    :maxlength="256"
                                    :minlength="2"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem prop="showOnHome" label=" ">
                                <Checkbox v-model="secondHand.showOnHome" >首页推荐</Checkbox>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem prop="inSlider" label=" ">
                                <Checkbox v-model="secondHand.inSlider" >幻灯片</Checkbox>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="16">
                        <Col span="6">
                            <FormItem label="参考价格" prop="price">
                                <Input
                                    v-model="secondHand.price"
                                    placeholder="88.88"
                                >
                                    <span slot="append">万元</span>
                                </Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="建筑面积" prop="area">
                                <Input
                                    v-model="secondHand.area"
                                    :maxlength="32"
                                    placeholder="120.00"
                                >
                                    <span slot="append">㎡</span>
                                </Input> 
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="户型" prop="layout">
                                <Input
                                    v-model="secondHand.layout"
                                    :maxlength="32"
                                    placeholder="三室两厅"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="总层高" prop="totalLayer">
                                <Input
                                    v-model="secondHand.totalLayer"
                                    :maxlength="32"
                                    placeholder="共10层"
                                ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="16">
                        <Col span="6">
                            <FormItem label="楼层" prop="layer">
                                <Input
                                    v-model="secondHand.layer"
                                    :maxlength="32"
                                    placeholder="6层"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="装修类型" prop="fitUp">
                                <Input
                                    v-model="secondHand.fitUp"
                                    :maxlength="32"
                                    placeholder="毛坯"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="年代" prop="completeDate">
                                <Input
                                    v-model="secondHand.completeDate"
                                    :maxlength="32"
                                    placeholder="2008年"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem label="产权年限" prop="ageLimit">
                                <Input-number
                                    :max="200"
                                    :min="1"
                                    v-model="secondHand.ageLimit"
                                ></Input-number> 年
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="16">
                        <Col span="6">
                            <FormItem
                                label="所属地区"
                                style="width: 100%"
                                prop="regionId"
                            >
                                <RegionSelect
                                    v-model="secondHand.regionId"
                                ></RegionSelect>
                            </FormItem>
                        </Col>
                        <Col span="18">
                            <FormItem label="详细地址" prop="address">
                                <Input
                                    v-model="secondHand.address"
                                    :maxlength="512"
                                ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem prop="sellPoint" label="核心卖点">
                        <Input type="textarea" v-model="secondHand.sellPoint"></Input>
                    </FormItem>
                    <FormItem prop="mentality" label="业主心态">
                        <Input type="textarea" v-model="secondHand.mentality"></Input>
                    </FormItem>
                </Card>
                <Card style="margin-top:16px">
                    <p slot="title">小区信息</p>
                    <Row :gutter="16">
                        <Col span="20">
                            <FormItem prop="feature" label="小区信息">
                                <Select v-model="secondHand.villageId" @on-change="onVillageChange">
                                    <Option v-for="item in villageList" :value="item.id" :key="item.id">{{item.name}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem label=" ">
                                <Button type="primary" @click="addVillage">添加小区</Button>
                            </FormItem>
                        </Col>
                        <Col span="24" v-if="!!selectVillage">
                            <VillageDetail :village="selectVillage"></VillageDetail>
                        </Col>
                    </Row>
                </Card>
                <Card style="margin-top:16px">
                    <p slot="title">二手房图片</p>
                    <MultiPicture
                        ref="upload"
                        v-model="imageUrls"
                        :requestData="{ pictureType: 'SecondHandImage' }"
                        @on-delete-success="deleteImage"
                    ></MultiPicture>
                </Card>
                <Card style="margin-top:16px">
                    <p slot="title">二手房详情</p>
                    <FormItem label=" " prop="content" v-if="value && typeof(secondHand.content) == 'string'">
                        <Editor  @onBlur="editorBlur('content')" v-model="secondHand.content" :init="tinymceInit"></Editor>
                    </FormItem>
                </Card>
            </Form>
            
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
        <create-village v-model="createVillageModalShow" @save-success="addVillageSuccess"></create-village>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import Ajax from "@/lib/ajax";
import AbpBase from "@/lib/abpbase";
import SecondHand from "@/store/entities/seconds/SecondHand";
import Village from "@/store/entities/estate/Village";
import MultiPicture from "@/components/multi-picture.vue";
import RegionSelect from "../../components/region-select.vue";
import CreateVillage from "../estate/villages/create-Village.vue";
import VillageDetail from "@/components/villages/village-detail.vue";
import Editor from "@tinymce/tinymce-vue";
import TinymceInit from "@/lib/TinymceInit";
@Component({
    components: { MultiPicture, RegionSelect, CreateVillage, VillageDetail,Editor }
})
export default class extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;

    tinymceInit = TinymceInit;

    secondHand: SecondHand = new SecondHand();
    imageUrls: Array<string> = new Array<string>();
    village: Village = new Village();

    selectVillage:Village = null;

    villageList: Array<Village> = new Array<Village>();
    addVillageSuccess(rsp){
        let v = rsp as Village;
        //console.log(v);
        this.villageList.unshift(v);
        this.selectVillage = v;
        this.$nextTick(()=>{
            this.secondHand.villageId = v.id;
        });
    }

    onVillageChange(value){
        let v = this.villageList.find((item)=>{
            return item.id == value;
        });
        this.selectVillage = v;
    }
    createVillageModalShow: boolean = false;

    editorBlur(filedName) {
        (this.$refs.secondHandForm as any).validateField(filedName);
    }
    deleteImage(imageUrl) {
        //Ajax.delete('/api/services/app/FloorImage/DeleteByImageUrl?ImageUrl='+imageUrl);
    }
    async getVillageList(){
        let reponse = await Ajax.get('/api/services/app/Village/GetAllList');
        this.villageList = reponse.data.result as Array<Village>;
    }
    addVillage() {
        this.createVillageModalShow = true;
    }
    save() {
        console.log(this.secondHand);
        (this.$refs.secondHandForm as any).validate(async (valid: boolean) => {
            if (valid) {
                let postData = {
                    secondHand: this.secondHand,
                    imageUrls: this.imageUrls
                };
                await this.$store.dispatch({
                    type: "secondHand/createEx",
                    data: postData
                });
                
                this.secondHand = new SecondHand();

                setTimeout(() => {
                    (this.$refs.secondHandForm as any).resetFields();
                }, 1000);

                this.$emit("save-success");
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.secondHandForm as any).resetFields();

        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        }
    }
    created() {
        this.getVillageList();
    }
    secondHandRole = {
        title: [
            {
                required: true,
                message: "请输入标题",
                trigger: "blur",
            },
            {
                type: "string",
                max: 256,
                message: "最长不得超过256个字符",
                trigger: "blur",
            },
        ],
        price: [
            {
                pattern: /^(([0-9])|([1-9]([0-9]+)))(.[0-9]+)?$/,
                message: "格式不正确",
                trigger: "blur",
            },
        ],
        area: [
            {
                pattern: /^(([0-9])|([1-9]([0-9]+)))(.[0-9]+)?$/,
                message: "格式不正确",
                trigger: "blur"
            },
        ],
        layout: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        ageLimit: [
            {
                pattern: /^(([0-9])|([1-9]([0-9]+)))(.[0-9]+)?$/,
                message: "格式不正确",
                trigger: "blur"
            },
        ],
        completeDate: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        address: [
            {
                type: "string",
                max: 256,
                message: "最长不得超过256个字符",
                trigger: "blur",
            },
        ],
        fitUp: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ]
    };
}
</script>